<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 50px auto;
            border-top: 1px solid transparent;
            width: 300px;
            height: 400px;
            background-color: #ecefff;
            text-align: center;
            border-radius: 10px;
            border: 1px solid gray;
            /* background: url(./img/4.gif); */
        }
.box img{
    width: 100%;
margin-top: 50px;
}
        .box .denglu {
            font-weight: 700;
            margin-top: 40px;
        }

        .box div:nth-child(2) {
            margin-top: 40px;
            margin-bottom: 20px;
        }

        .box input {
            /* background-color: #f7f7f7; */
            width: 180px;
            height: 30px;
            outline: none;
            border: 1px solid gray;
            border-radius: 10px;
            font-size: 12px;
        }

        .box .btn {
            background-color: #5c7dfe;
            width: 180px;
            height: 30px;
            margin-top: 20px;
            border: 0;
            border-radius: 5px;
            cursor: pointer;
            color: white;
        }

        .box a {
            margin-top: 10px;
            margin-left: 80px;
            font-size: 12px;
            display: block;
            text-decoration: none;
            color: blue;
        }

        .zhuce {
            /* width: 180px; */
            /* display: block; */
            text-align: center;
            display: flex;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <div class="denglu">登录页</div> -->
        <img src="./img/阿里云盘.png" alt="">
        <div> <input type="text" placeholder="手机号/用户名/邮箱"></div>
        <div> <input type="password" placeholder="请输入密码"></div>
        <div class="zhuce">
            <a href="./注册页promise封装.html">注册</a>
            <a href="http://study.qfedu.com/forget">忘记密码？</a>
        </div>
        <input class="btn" type="button" value="登录">
    </div>
</body>

</html>
<script src="./04-ajax.js"></script>
<script>
    //获取所有的input标签
    var inputs = document.querySelectorAll('.box input')
    inputs[1].onclick=function(){
        if(inputs[1].type=='password'){
            inputs[1].type='text'
        }
        else{(inputs[1].type=='text')
            inputs[1].type='password'
        }
    }
    console.log(inputs)
    //给登录按钮绑定点击事件
    document.querySelector('.box .btn').onclick = function () {
        //判断输入为空的情况
        if (inputs[0].value && inputs[1].value) {
            //利用正则判断，输入用户名格式是否符合要求
            if (/[0-9a-zA-Z]{4,8}/.test(inputs[0])) {
                //如果校验通过。再发起点击登录请求
                ajax('get', 'https://yantianfeng.com/api/login', {
                    username: inputs[0].value,
                    password: inputs[1].value
                } 
                ).then((data)=>{
                     //console.log(data);
                     if (data.code == 200) {
                        alert(data.msg)
                    } else {
                        alert(data.msg)
                    }
                })

            }
        } else {
            alert("输入为空，请重新输入！")
        }
    }
</script>